<template>
  <div class="wrapper">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible width="15vw">
        <div class="logo">
          <a-icon type="ant-cloud" style="font-size: 3vh"/>
          <p class="title">{{title}}</p>
        </div>
        <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
          <a-menu-item key="1" style="font-size: 2vh">
            <div @click="toMonitor">
              <a-icon type="audit" />
              <span>监控大屏</span>
            </div>
          </a-menu-item>
          <a-sub-menu key="sub2" style="font-size: 2vh;margin-top: 2vh">
            <span slot="title" style="font-size: 2vh"><a-icon type="bar-chart" />数据中心</span>
            <a-menu-item key="6">
              <div @click="toData(1)">
                <a-icon type="line-chart" />
                <span>数据统计</span>
              </div>
            </a-menu-item>
            <a-menu-item key="7">
              <div @click="toData(2)">
                <a-icon type="history" />
                <span>历史记录</span>
              </div>
            </a-menu-item>
            <a-menu-item key="8">
              <div @click="toData(3)">
                <a-icon type="export" />
                <span>设备上下线</span>
              </div>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="3" style="font-size: 2vh;margin-top: 2vh">
            <div @click="toDevice">
              <a-icon type="control" />
              <span>设备管理</span>
            </div>
          </a-menu-item>
          <a-menu-item key="4" style="font-size: 2vh;margin-top: 2vh">
            <div @click="toEquipment">
              <a-icon type="build" />
              <span>设备运维</span>
            </div>
          </a-menu-item>
          <a-menu-item key="5" style="font-size: 2vh;margin-top: 2vh">
            <div @click="toOther">
              <a-icon type="appstore" />
              <span>其它扩展</span>
            </div>
          </a-menu-item>
          <a-menu-item key="10" style="font-size: 2vh;margin-top: 2vh">
            <div @click="toUser">
              <a-icon type="user" />
              <span>个人中心</span>
            </div>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0;display: flex;justify-content: space-between">
          <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => {collapsed = !collapsed;if(!collapsed){this.title = '智慧渔业管理系统'}else{this.title = ''}}"
          />
          <p style="margin-right: 5vw">@copyRight2021 wzj</p>
        </a-layout-header>
        <a-layout-content
            :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
          <div style="color: red;font-size: 2vh">
            <router-view/>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      title:'智慧渔业管理系统'
    };
  },
  methods:{
    toMonitor(){
      this.$router.push('/monitoringScreen')
    },
    toData(index){
      if(index === 1){
        this.$router.push('/dataCenter/dataStatistics')
      }else if(index === 2){
        this.$router.push('/dataCenter/historicalRecords')
      }else{
        this.$router.push('/dataCenter/onlineOffline')
      }
    },
    toDevice(){
      this.$router.push('/deviceManager')
    },
    toEquipment(){
      this.$router.push('/equipmentOperation')
    },
    toOther(){
      this.$router.push('/otherExtend')
    },
    toUser(){
      this.$router.push('/user')
    }
  }
};
</script>

<style scoped lang="less">
  .wrapper{
    height: 100vh;
    width: 100vw;
  }
  #components-layout-demo-custom-trigger{
    height: 100%;
    width: 100%;
   }

    #components-layout-demo-custom-trigger .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
    }
    #components-layout-demo-custom-trigger .trigger:hover {
      color: #1890ff;
    }
    .logo{
      height: 5vh;
      margin: 16px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2vh;
    }
  .title{

  }
</style>
